<template>
  <div class="linkPageBox backgroundImg">
    <div class="cWidth linkPage">
      <div class="flex between">
        <img
          src="http://25059279.s61i.faiusr.com/4/AD0Iz7-5CxAEGAAgqrru_QUoptHujgQwtQQ4hwM.png.webp"
          alt=""
        />
        <div class="lpRight">
          <div class="lpRight1">欢迎联系！</div>
          <div class="lpRight2">Welcome to link me！</div>
          <div class="lpRight3">
            <el-form ref="ruleFormRef" :model="form" :rules="rules" status-icon>
              <el-form-item
                v-for="item in formDate"
                :key="item.name"
                :label="item.lable"
                :prop="item.prop"
              >
                <ElInput
                  v-model="form[item.prop]"
                  :placeholder="`请输入${item.lable}`"
                />
              </el-form-item>
              <el-form-item key="describe" label="补充：" prop="describe">
                <ElInput
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  v-model="form.linkDescribe"
                  placeholder="请输入补充"
                ></ElInput>
              </el-form-item>
            </el-form>
            <el-button class="bottomBtn" :loading="loading" @click="submitForm"
              >提交</el-button
            >
          </div>
        </div>
      </div>
      <div class="linkPageBottom flex around">
        <div v-for="item in linkType" class="center" :key="item.content">
          <div style="height: 30px">
            <img :style="item.style" :src="item.img" alt="" />
          </div>
          <div>{{ item.content }}</div>
        </div>
      </div>
    </div>
    <ThreePlone />
  </div>
</template>
<script lang="ts" setup>
import { ElInput, ElFormItem, ElButton, ElForm, ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import ThreePlone from "@/component/threeplane.vue";
import { postLink } from "@/server/home";
import { useAllStore } from "~/stores";
import { storeToRefs } from "pinia";
const strore = useAllStore();
let { linkData } = storeToRefs(strore);
const formDate = ref([
  { prop: "linkName", lable: "昵称:" },
  { prop: "linkCompony", lable: "公司:" },
  { prop: "linkPhone", lable: "手机:" },
]);
// 不写await 会导致服务端没拿到结果就返回html 然后造成服务端和客户端内容不一样
// 以及下面的linkDate拿不到结果
const route = useRoute();
let link = route.query.link;
let eid = route.params.ename;
if (!linkData.value) await strore.getLinkd({ link: link, eid: eid });
const linkType = [
  {
    style: { width: "35px" },
    img: "/wxLink.png",
    content: linkData.value?.wxLink || "",
  },
  {
    style: { width: "35px" },
    img: "http://25050185.s61i.faiusr.com/4/AD0Iyfj4CxAEGAAgt5Tp_QUo28f9hQcwIzgk.png.webp",
    content: linkData.value?.qqLink || "",
  },
  {
    style: { width: "25px" },
    img: "http://25050185.s61i.faiusr.com/4/AD0Iyfj4CxAEGAAgv5Tp_QUo1KW2pQQwGTgk.png.webp",
    content: linkData.value?.phone || "",
  },
  {
    style: { width: "33px" },
    img: "http://25050185.s61i.faiusr.com/4/AD0Iyfj4CxAEGAAgxZTp_QUoqNeSogYwITgc.png.webp",
    content: linkData.value?.email || "",
  },
];
const loading = ref(false);
const form = ref({});
const rules = reactive({
  name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  company: [{ required: true, message: "请输入公司", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机", trigger: "blur" }],
});
const ruleFormRef = ref<FormInstance>();
const submitForm = async () => {
  ruleFormRef.value.validate(async (valid: any, fields: any) => {
    if (valid) {
      loading.value = true;
      let { data: linkDat } = await postLink({
        ...form.value,
        link: link,
        eid: eid,
      });
      if (linkDat.value?.flag) {
        ElMessage.success("提交成功,感谢您的填写！");
        form.value = {};
      }
      loading.value = false;
    } else {
      loading.value = false;
      console.log("error submit!", fields);
    }
  });
};
</script>
<style scoped lang="scss">
.linkPageBox {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  background-image: url("/57a2a1fa8b74a.jpg");
}
.linkPage {
  overflow: hidden;
  line-height: 36px;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  position: absolute;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
  top: 87px;
  .lpRight {
    flex: 1;
    text-align: left;
    margin-top: 20px;
    margin-left: 20px;
    .lpRight1 {
      font-size: 24px;
      color: rgb(241, 58, 58);
    }
    .lpRight2 {
      color: rgb(119, 119, 119);
      font-size: 20px;
    }
    .lpRight3 {
      margin-top: 20px;
      font-size: 14px;
      font-weight: 700;
    }
    .bottomBtn {
      width: 100%;
      text-align: center;
      cursor: pointer;
      color: #fff;
      font: 17px 微软雅黑;
      height: 44px;
      line-height: 44px;
      background-color: #f54f4f;
      border-radius: 10px;
    }
  }
  .linkPageBottom {
    background: #fff7e6;
    height: 65px;
    margin-left: 10px;
    border-radius: 10px;
    padding-top: 10px;
  }
}
</style>
